<!--
 * @Author: your name
 * @Date: 2020-06-01 15:21:36
 * @LastEditTime: 2020-06-17 18:25:48
 * @LastEditors: Please set LastEditors
 * @Description: 点击通讯录列表获取到的用户信息/群聊信息
 * @FilePath: \IM_Web\im_web\src\components\userInfoRegion\userInfoRegion.vue
--> 
<template>
    <div class="user_info">
        <div class="user_info_content">
            <div class="flex info_header">
                <div class="avatar">
                    <img :src="menberInfo.avatar" alt="">
                </div>
                <div class="nick_name">{{menberInfo.nickname}}</div>
            </div>
            <div class="lable_box">
                <div class="flex align_center info_item">
                    <div class="name_icon"></div>
                    <div class="flex">
                        <div class="lable">昵称</div>
                        <div>{{menberInfo.nickname}}</div>
                    </div>
                </div>
                <div class="flex align_center info_item">
                    <div class="id_icon"></div>
                    <div class="flex">
                        <div class="lable">ID</div>
                        <div>{{menberInfo.accid}}</div>
                    </div>
                </div>
                <div class="flex align_center info_item">
                    <div class="post_icon"></div>
                    <div class="flex">
                        <div class="lable">职位</div>
                        <div>{{menberInfo.position}}</div>
                    </div>
                </div>
                <div class="flex align_center info_item">
                    <div class="tel_icon"></div>
                    <div class="flex">
                        <div class="lable">电话</div>
                        <div>{{menberInfo.phone}}</div>
                    </div>
                </div>
            </div>
            <div>
                <Button type="primary" class="firing_news">发消息</Button>
            </div>
        </div>
    </div>
</template>

<script>
// import BuddyList from "../buddyList/buddyList";
export default {
    props: {
        menberInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {},
    methods: {},
    components: {
        // BuddyList
    }
};
</script>

<style scoped lang="less">
.user_info {
    // padding: 10px;
    // box-sizing: border-box;
    border-left: 1px solid #e2e2e2;
    .user_info_content {
        // padding: 20px;
        // box-sizing: border-box;
        // padding-top: 0;
        .info_header {
            border-bottom: 1px solid #e2e2e2;
            padding: 50px 58px;
            padding-top: 0px;
            box-sizing: border-box;
            .nick_name {
                font-size: 20px;
                margin-left: 12px;
            }
            .avatar {
                width: 110px;
                height: 110px;
                // border-radius: 50%;
                background: #ddd;
                img{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .lable_box {
            padding: 62px 60px;
            box-sizing: border-box;
            .info_item {
                margin: 15px 0;
                font-size: 20px;
                .name_icon,
                .post_icon,
                .tel_icon {
                    width: 22px;
                    height: 22px;
                    margin-right: 16px;
                }
                .id_icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                    background: url("../../assets/images/index/icon_id@2x.png");
                    background-size: 100% 100%;
                }
                .name_icon {
                    background: url("../../assets/images/index/icon_profile@2x.png");
                    background-size: 100% 100%;
                }
                .post_icon {
                    background: url("../../assets/images/index/icon_zhiwei@2x.png");
                    background-size: 100% 100%;
                }
                .tel_icon {
                    background: url("../../assets/images/index/icon_phone@2x.png");
                    background-size: 100% 100%;
                }
                .lable {
                    width: 80px;
                    text-align: left;
                }
            }
        }
    }
    .firing_news {
        width: 237px;
        height: 49px;
        background: #2396f7;
        border-radius: 24px;
        font-size: 21px;
        margin-top: 50px;
    }
}
</style>
